//变量
$length:1px;
$font-size:1px;
$fontColor:rgba(255,255,255,0.6);
$fontColorHover:rgba(255,255,255,1);
$bgImage:linear-gradient(#EDF5F8,#FAFAFA);
$pageWidth:1256*$length;

$index1:100;
$index2:200;
$index3:300;
$index4:400;
$index5:500;

//混合
@mixin fontStyle($value1,$value2,$value3,$value4,$value5){
  font-size:$value1*$font-size;
  height:$value2*$length;
  line-height: $value2*$length;
  font-weight: $value3;
  color:$value4;
  text-align: $value5;
}

@mixin border-radius($radius) {
  border-radius: $radius;
  -ms-border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}
@mixin transform($value) {
  transform:$value;
  -webkit-transform:$value;
  -moz-transform:$value;
  -ms-transform:$value;
  -o-transform:$value;
}
@mixin transition($value) {
  transition:$value;
  -webkit-transition:$value;
  -moz-transition:$value;
  -ms-transition:$value;
}
@mixin box-shadow($value){
  box-shadow:$value;
  -webkit-box-shadow: $value;
  -ms-box-shadow: $value;
  -moz-box-shadow: $value;
}
@mixin filter($value){
  -webkit-filter: $value;
  -moz-filter: $value;
  -ms-filter: $value;
  filter: $value;
}


//继承
%flex-column-center{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
%flex-column-spb{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}
%flex-row-center{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}
%flex-row-spb{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}
%animate-transition{
  transition:.6s ease;
}
%cursorPointer{
  cursor:pointer
}

%markdown{
  /*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

  .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #333;
    background: #fcfcfc;
  }

  .hljs-comment,
  .hljs-quote {
    color: #998;
    font-style: italic;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-subst {
    color: #333;
    font-weight: 500;
  }

  .hljs-number,
  .hljs-literal,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-tag .hljs-attr {
    color: #008080;
  }

  .hljs-string,
  .hljs-doctag {
    color: #d14;
  }

  .hljs-title,
  .hljs-section,
  .hljs-selector-id {
    color: #900;
    font-weight: 500;
  }

  .hljs-subst {
    font-weight: normal;
  }

  .hljs-type,
  .hljs-class .hljs-title {
    color: #458;
    font-weight: 500;
  }

  .hljs-tag,
  .hljs-name,
  .hljs-attribute {
    color: #000080;
    font-weight: normal;
  }

  .hljs-regexp,
  .hljs-link {
    color: #009926;
  }

  .hljs-symbol,
  .hljs-bullet {
    color: #990073;
  }

  .hljs-built_in,
  .hljs-builtin-name {
    color: #0086b3;
  }

  .hljs-meta {
    color: #999;
    font-weight: 500;
  }

  .hljs-deletion {
    background: #fdd;
  }

  .hljs-addition {
    background: #dfd;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: 500;
  }

  pre {
    position: relative;
    margin-bottom: 24px;
    border-radius: 2px;
    border: 1px solid #f6f6f6;
    background: #FFF;
    overflow: hidden;
  }
  code {
    //display: block;
    //padding: 6px 12px;
    overflow-y: auto;
    font-weight: 300;
    font-family: Menlo, monospace;
    //font-size: 14px;
  }
}
%article-content {
  @extend %markdown;
  padding:40*$length 6px;
  word-wrap: break-word;
  overflow: hidden;
  font-size: 16*$font-size;

  *{
    word-wrap: break-word;
    // overflow: auto;
  }
  
  pre {
      font-size: 100%;
  }

  b, strong{
    font-weight: bold;
  }

  ul,ol{
    line-height: 1.75;
  }

  h1,h2,h3,h4,h5,h6{
    line-height: 1.5;
  }

  h2, h3, h4, {
    line-height: 1.75;
  }

  a{
    color:#00AAE6;
  }
  p{
    line-height: 1.75;
  }

  li{
    line-height: 1.75;
  }

  blockquote{
    line-height: 1.4;
  }
  img,
  audio,
  video{
    max-width: 100%;
    height: auto;
  }
}

//文字超出不换行
%nowrap{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


//行内元素垂直居中
%inlineBlockV{
  &:before{
    content:'';
    display: inline-block;
    height:100%;
    vertical-align: middle;
  }
}

//清除浮动
%clearFix{
  &:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
  }

  & {
    *zoom: 1
  }
}

//定义一些过渡

.fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}


//icon
 .fadeIcon-enter-active ,.fadeIcon-leave-active{
   transition: all .8s;
}

.fadeIcon-enter {
  opacity: 0;
  transform: scale(.5);
}
.fadeIcon-leave-to{
  opacity: 0;
  transform: scale(1.2);
}


/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
